<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="header">
			<text style="color: #007AFF;" @click="qx">取消</text>
			<text>预约说明</text>
			<text style="color: #007AFF;" @click="tj">提交</text>
		</view>

		<!-- 内容 -->
		<view>
			<radio-group class="neirong" >
				<label class="radio">
					用户暂时不用安装
					<text class="iconfont radioo" :style="'color:'+color+';'"
						:class="{'icon-radio':isCheck,'icon-RadioButton':!isCheck}"
						@click.stop="setRadioStatus(0)"></text>
				</label>
				<label class="radio">
					空调已安装
					<text class="iconfont radioo" :style="'color:'+color+';'"
						:class="{'icon-radio':isCheck1,'icon-RadioButton':!isCheck1}"
						@click.stop="setRadioStatus(1)"></text>

				</label>
				<label class="radio">其他
					<text class="iconfont radioo" :style="'color:'+color+';'"
						:class="{'icon-radio':isCheck2,'icon-RadioButton':!isCheck2}"
						@click.stop="setRadioStatus(2)"></text>

				</label>
				<label v-if="checkedd==true" class="radio" @change="radiofuntion" >
					<textarea class="text-area" placeholder-style="color:#eeeeee" placeholder="详细说明"
						@input="inputarea" />
				</label>
			</radio-group>
		</view>


	</view>
</template>

<script>
	export default {
		props: {
			color: {
				type: String,
				default: '#00ffff'
			},
			checked: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Boolean],
				default: ''
			}
		},
		data() {

			return {
				checkedd: false,
				isCheck: false,
				isCheck1: false,
				isCheck2: false,
				inputtext: '', //多行 输入的值为
				radiodata: {
					radio: '',
					textarea: '',
				}
			}
		},
		onLoad() {

		},
		methods: {
			tj() {
				// console.log("this.radiodata：" + this.radiodata);
				for (var index in this.radiodata) {
					console.log("键:" + index + "值:" + this.radiodata[index]);
				}
				// console.log("多行输入框:" + this.radiodata["textarea"])
				uni.showToast({
					title: this.radiodata["textarea"], //r5
					duration: 2000
				});
			},
			inputarea(e) {
				// console.log("多行输入框输入的值为:" + e.detail.value);
				let textarea = e.detail.value;
				this.radiodata["textarea"] = textarea;
				//console.log("赋值给this.radiodata[textarea]：" + this.radiodata["textarea"]);

			},
			setRadioStatus(status) {
				if (status == 0) {
					this.isCheck = true;
					this.isCheck1 = false;
					this.isCheck2 = false;
					this.isCheck3 = false;
					this.isCheck4 = false;
					this.checkedd = true;
					this.radiodata["radio"] = "0";
				} else if (status == 1) {
					this.isCheck = false;
					this.isCheck1 = true;
					this.isCheck2 = false;
					this.isCheck3 = false;
					this.isCheck4 = false;
					this.checkedd = true;
					this.radiodata["radio"] = "1";
				} else if (status == 2) {
					this.isCheck = false;
					this.isCheck1 = false;
					this.isCheck2 = true;
					this.isCheck3 = false;
					this.isCheck4 = false;
					this.checkedd = true;
					this.radiodata["radio"] = "2";
				} 
				
			},

		}
	}
</script>

<style>
	@import url("/static/xhy-radio/xhy-iconfont.css");


	.radioo {
		width: 48upx;
		height: 48upx;
		margin-right: 10upx;
		margin-top: 10upx;
		float: right;
		position: relative;
		bottom: 6px;
	}

	page {
		width: 100%;
		background-color: #EEEEEE;
		min-height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.header {
		display: flex;
		flex-direction: row;
		/* justify-content: center;
		align-items: center; */
		justify-content:space-between;
		margin-top: 2px;
		padding-top: 5px;
		padding-bottom: 10px;
		background-color: #ffffff;
	}

	.neirong {
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.radio {
		margin-top: 4rpx;
		padding-top: 10rpx;
		padding-bottom: 3rpx;
		background-color: #FFFFFF;
		padding-left: 10rpx;
	}

	.radio_ty {
		float: right;
	}

	.btn {
		display: flex;
		height: 30px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
</style>
